<script setup>
import { getHomeBannerList } from '@/apis/banner'
import { onMounted, ref } from 'vue'

const props = defineProps(['distributionSite'])
const bannerList = ref([])
onMounted(async () => {
  bannerList.value = await getHomeBannerList(props.distributionSite || 1)
})
</script>

<template>
  <el-carousel v-if="bannerList.length" class="carousel" autoplay :interval="5000">
    <el-carousel-item v-for="item in bannerList" :key="item.id">
      <img v-img-lazy="item.imgUrl" alt="" src="" />
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.carousel {
  height: 100%;
}

.demonstration {
  color: var(--el-text-color-secondary);
}
::v-deep .el-carousel__container {
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__item {
  img {
    height: 100%;
    width: 100%;
  }
}
</style>
